<template>
  <div>
    <div class="list-itme">
      <span class="setting-title" @click="showModal" >订单显示顺序</span>
      <picker mode="selector" :range="shunxuNameList" v-model="shunxuIndex" @change="shunxuChange" style="width: 75%;float: right">
        <div class="placeholder selcted" style="float: left;width: 95%">{{ shunxuName }}</div>
        <div class="add-ren-ft" style="right: 2px;top: 15px;position: relative;">
        </div>
      </picker>
      <toast ref="mytoast"/>
    </div>
    <view class="modals modals-bottom-dialog" v-if="!hideModal">
        <view class="modals-cancel" @click="hideModals"></view>
        <view class="bottom-dialog-body bottom-pos" :class="{pop:!hideModal}">
          <view class="borderCl">
            <view v-for="(i,index) in shunxuList" :key="index" >
              <button class="btn sendFriends shareTips" open-type="share">{{i.name}}</button>
            </view>
          </view>


            <view bindtap="hideModal" class="btn borderCl cancel" @click="hideModals">取消</view>
        </view>
    </view>
  </div>
</template>

<script>
    import api from '@/utils/api'
    import toast from "@/components/toast";

export default {
  components: {toast},

  data() {
    return {
        shunxuName : '请选择',
        shunxuList : [
            {"code":2,"name":"按订单付款时间，先付款的在前边111111"},
            {"code":1,"name":"按订单付款时间，后付款的在前边"},
            {"code":4,"name":"按订单下单时间，先下单的在前边"},
            {"code":3,"name":"按订单下单时间，后下单的在前边"},
            {"code":8,"name":"按订单商品总数量，数量少的在前边"},
            {"code":9,"name":"按订单商品总数量，数量多的在前边"},
            {"code":5,"name":"按订单商品标题，相同的商品排列在一起"},
            {"code":6,"name":"按订单销售属性排序"},
            {"code":7,"name":"按订单商品编码排序"}
        ],
        shunxuNameList : [
            "按订单付款时间，先付款的在前边",
        "按订单付款时间，后付款的在前边",
        "按订单下单时间，先下单的在前边",
        "按订单下单时间，后下单的在前边",
        "按订单商品总数量，数量少的在前边",
        "按订单商品总数量，数量多的在前边",
        "按订单商品标题，相同的商品排列在一起",
        "按订单销售属性排序",
        "按订单商品编码排序"],
        shunxuIndex : '',
         hideModal: true, //模态框的状态  true-隐藏  false-显示
    animationData: {},
    };
  },

  created() {},

    onShow() {
      this.shunxuName = '请选择';
      this.shunxuIndex = '';
      this.loadSetting();
    },

    methods: {
      shunxuChange(e) {
          var index = e.mp.detail.value;
          this.shunxuIndex = index;
          this.shunxuName = this.shunxuNameList[index];
          this.saveSetting();
      },

      loadSetting(){
          var _this = this;
          wx.request({
              url: wx.getStorageSync("otherPath") + api.queryUserBaseConfigList + "?ecstoken=" + wx.getStorageSync("sessionId"),
              header: {
                  'Content-Type': 'application/x-www-form-urlencoded',
                  ecstoken : wx.getStorageSync('sessionId'),
                  fslb : wx.getStorageSync('fslb')
              },
              method: "POST",
              data: {},
              success(res) {
                  console.log(res);
                  if(res.data.code != 200){
                      _this.$refs.mytoast.show(res.data.msg);
                      return ;
                  }
                  res.data.data.forEach((data,index) => {
                      if(data.configKey == 'listPageOrderBy'){
                          var value = data.configValue;
                          _this.shunxuList.forEach((shunxu,index_1) => {
                              if(shunxu.code == value){
                                  _this.shunxuIndex = index_1;
                                  _this.shunxuName = shunxu.name;
                              }
                          })
                      }
                  });

              },
              fail(res) {
                  console.log(res);
                  _this.$refs.mytoast.show("网络异常");
              },
              complete(){

              }
          });
      },

        saveSetting(){
            var _this = this;
            var configList = [];
            var shunxu = {
                "configValue":this.shunxuNameList[this.shunxuIndex].code,
                "systemConfigId":"121"
            }
            configList.push(shunxu);
            wx.request({
                url: wx.getStorageSync("otherPath") + api.saveUserSystemConfig + "?ecstoken=" + wx.getStorageSync("sessionId"),
                header: {
                    "Content-Type": "application/json",
                    ecstoken : wx.getStorageSync('sessionId'),
                    fslb : wx.getStorageSync('fslb')
                },
                method: "POST",
                data: {
                    configList : configList
                },
                success(res) {
                    console.log(res);
                    if(res.data.code != 200){
                        _this.$refs.mytoast.show(res.data.msg);
                        return ;
                    }
                    _this.$refs.mytoast.show("设置成功");
                },
                fail(res) {
                    console.log(res);
                    _this.$refs.mytoast.show("网络异常");
                },
                complete(){

                }
            });
        },
        // 显示遮罩层
  showModal: function () {
    var that = this;
    that.hideModal = false

    // var animation = wx.createAnimation({
    //   duration: 600,//动画的持续时间 默认600ms   数值越大，动画越慢   数值越小，动画越快
    //   timingFunction: 'ease',//动画的效果 默认值是linear
    // })
    // this.animation = animation
    // setTimeout(function () {
    //   that.fadeIn();//调用显示动画
    // }, 200)
  },

  // 隐藏遮罩层
  hideModals: function () {
    var that = this;
    that.hideModal = true;
    // var animation = wx.createAnimation({
    //   duration: 800,//动画的持续时间 默认800ms   数值越大，动画越慢   数值越小，动画越快
    //   timingFunction: 'ease',//动画的效果 默认值是linear
    // })
    // this.animation = animation
    // that.fadeDown();//调用隐藏动画
    setTimeout(function () {

    }, 720)//先执行下滑动画，再隐藏模块

  },

  //动画集
  fadeIn: function () {
    this.animation.translateY(0).step()
    this.setData({
      animationData: this.animation.export()//动画实例的export方法导出动画数据传递给组件的animation属性
    })
  },
  fadeDown: function () {
    this.animation.translateY(300).step()
    this.setData({
      animationData: this.animation.export(),
    })
  },
  }
};
</script>

<style lang="wxss">
  page {
    width: 100%;
    height: 100%;
    background-color: #f7fbff;
  }
  /*模态框*/

.modals {
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.modals .modals-cancel {

    position: absolute;
    z-index: 1000;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
}

.modals .bottom-dialog-body {
    position: absolute;
    z-index: 10001;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 30rpx;
}

/*动画前初始位置*/

.modals .bottom-pos {
  /* border-radius:  */
  -webkit-transform: translateY(100%);
  transform: translateY(100%);

}

.modals .btn {
    background: #fff;
    color: #373E4F;
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 97rpx;
    justify-content: flex-start;
    font-size: 30rpx;
    text-indent: 1em;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    border-radius: 0;
    border-bottom: 1rpx solid #E8EAF0;

}
button::after{
  border:none;
}

.modals .sendFriends {
    /* border-bottom: 1rpx solid #acacac; */
}

.modals .borderCl {
    border-radius: 25rpx;
    overflow: hidden;
}

.modals .cancel {
  justify-content: center;
  color: #0077FF;
  margin: 16rpx 0;
}
.bottom-pos.pop{
  animation: move 0.3s ease 0.1s ;
  animation-fill-mode:forwards;
}
@keyframes move {
  from{
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }
  to{
    transform: translateY(0);
    -webkit-transform: translateY(0);
  }
}
</style>

<style scoped>
  .list-itme {
    display: flex;
    align-items: center;
    height: 40px;
    line-height: 40px;
    padding: 0 30rpx;
    background-color: #ffffff;
    border-bottom: 0.5px solid #e8eaf0;
  }

  .list-itme .setting-title{
    width: 25%;
    color:#373E4F;
    font-size: 26rpx;
  }
  .list-itme span {
    font-size: 0.26rem;
  }

  .placeholder {
    color:#A3AAB7;
    font-size: 29rpx;
    font-family: PingFang SC;
  }
  .selcted{
    color: #373E4F;
  }

  .add-ren-ft {
    width: 5%;
    float: right;
    content: " ";
    display: inline-block;
    height: 8px;
    width: 8px;
    border-width: 2px 2px 0 0;
    border-color: #b2b2b2;
    border-style: solid;
    -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  }
</style>
